<script setup lang="ts" name="CCParentPage_Slot">
import Game from "./Game.vue";
</script>

<template>
  <div class="bg-gray-100 p-6">
    <h2 class="text-xl">父组件</h2>
    <div class="flex justify-evenly items-start gap-x-2">
      <Game>
        <template v-slot="params">
          <ul class="list-disc pl-4">
            <li v-for="g in params.games" :key="g.id" class="p-1 odd:bg-sky-300">
              {{ g.name }}
            </li>
          </ul>
        </template>
      </Game>
      <Game>
        <template #="params">
          <ol class="list-decimal pl-4">
            <li v-for="g in params.games" :key="g.id" class="p-1 even:bg-cyan-300">
              {{ g.name }}
            </li>
          </ol>
        </template>
      </Game>
      <Game>
        <template #default="{ games }">
          <div v-for="g in games" :key="g.id" class="border border-black px-1 text-center py-0.5 my-1 rounded">
            {{ g.name }}
          </div>
        </template>
      </Game>
    </div>
  </div>
</template>
